Screen Wake Lock API: Näytön sammumisen estäminen verkkosovelluksissa

Screen Wake Lock API on web-API, joka antaa verkkosovellusten estää laitteita himmentämästä tai lukitsemasta näyttöä. Tämä on erityisen hyödyllistä sovelluksissa, joissa jatkuva näytön näkyvyys on välttämätöntä, kuten mediasoittimissa, navigaatiosovelluksissa ja sovelluksissa, jotka vaativat käyttäjän vuorovaikutusta pitkiä aikoja.

Miksi Screen Wake Lock on tärkeä?

Nykypäivän maailmassa käyttäjät odottavat saumattomia kokemuksia. Laite, joka automaattisesti himmentää tai lukitsee näytön, voi häiritä näitä kokemuksia, erityisesti kun käyttäjät ovat aktiivisesti vuorovaikutuksessa verkkosovelluksen kanssa. Harkitse seuraavia tilanteita:

• Videon toisto: Kuvittele katsovasi elokuvaa tai seuraavasi ruoanlaitto-ohjetta, ja näyttö himmenee jatkuvasti pakottaen sinut napauttamaan näyttöä pitääksesi sen hereillä. Tämä on turhauttava kokemus.
• Navigaatiosovellukset: Ajaessasi ja käyttäessäsi navigaatiosovellusta näytön on pysyttävä päällä jatkuvien ohjeiden antamiseksi. Himmeä tai lukittu näyttö voi johtaa ohiajoihin ja mahdollisiin turvallisuusriskeihin.
• Esityssovellukset: Diojen esittäminen tai tärkeiden tietojen näyttäminen vaatii näytön pysymistä aktiivisena koko esityksen ajan.
• Pelisovellukset: Monet pelit vaativat keskeytymätöntä näytön näkyvyyttä pelaamista varten. Näytön sammuminen voi häiritä pelikokemusta.
• Verkkovalkotaulut: Yhteistyöskentely verkkovalkotaululla vaatii näytön pysymistä hereillä, jotta käyttäjien ei tarvitse jatkuvasti napauttaa näyttöä uudelleenaktivoidakseen sen.

Screen Wake Lock API tarjoaa ratkaisun näihin ongelmiin, mahdollistaen verkkosovellusten hallita näytön päällä/pois-tilaa ja tarjota saumattomamman ja käyttäjäystävällisemmän kokemuksen.

Selaintuki

Vuoden 2024 loppupuolella Screen Wake Lock API:lla on vankka tuki suurimmissa selaimissa. On kuitenkin aina tärkeää tarkistaa ajantasaiset selainyhteensopivuustiedot lähteistä, kuten Mozilla Developer Network (MDN) ja Can I use, optimaalisen selaintenvälisen yhteensopivuuden varmistamiseksi. Selaintuki voi vaihdella selainversion ja käyttöjärjestelmän mukaan.

Screen Wake Lock API:n käyttö

Screen Wake Lock API:n käyttö on suhteellisen yksinkertaista. Tässä on erittely keskeisistä vaiheista:

1. Tarkista API-tuki

Ennen API:n käyttöä on tärkeää tarkistaa, tukeeko käyttäjän selain sitä. Tämä estää virheet selaimissa, jotka eivät toteuta API:a.

            if ('wakeLock' in navigator) {
  // Screen Wake Lock API on tuettu
} else {
  // Screen Wake Lock API ei ole tuettu
  console.log('Screen Wake Lock API ei ole tämän selaimen tukema.');
}

            

              
                Copy
              
            
          

2. Pyydä herätyslukkoa

Herätyslukon pyytämiseksi käytä navigator.wakeLock.request()-metodia. Tämä metodi palauttaa Promisen, joka ratkeaa WakeLockSentinel-objektilla, jos pyyntö onnistuu. WakeLockSentinel-objekti edustaa aktiivista herätyslukkoa.

            let wakeLock = null;

const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    console.log('Näytön herätyslukko aktiivinen!');

    wakeLock.addEventListener('release', () => {
      console.log('Näytön herätyslukko vapautettiin');
    });
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

// Kutsu tätä funktiota aktivoidaksesi herätyslukon
requestWakeLock();

            

              
                Copy
              
            
          

Tässä esimerkissä requestWakeLock()-funktio yrittää hankkia näytön herätyslukon. Argumentti 'screen' määrittää, että haluamme estää näytön himmenemisen tai lukittumisen. Jos pyyntö onnistuu, konsoliin tulostetaan viesti. Koodi sisältää myös virheenkäsittelijän mahdollisten poikkeusten varalta herätyslukkoa pyydettäessä. Kriittistä on, että koodi lisää tapahtumankuuntelijan "release"-tapahtumalle, joka ilmaisee, kun herätyslukko ei ole enää aktiivinen. Tämä voi tapahtua, jos käyttäjä on vapauttanut lukon erikseen tai jos järjestelmä on ottanut sen takaisin virransäästötoimien vuoksi.

3. Vapauta herätyslukko

On erittäin tärkeää vapauttaa herätyslukko, kun sitä ei enää tarvita. Vapauttamatta jättäminen voi kuluttaa laitteen akkua ja vaikuttaa negatiivisesti käyttökokemukseen. Vapauttaaksesi herätyslukon, kutsu release()-metodia WakeLockSentinel-objektilla.

            const releaseWakeLock = async () => {
  if (wakeLock) {
    await wakeLock.release();
    wakeLock = null;
    console.log('Näytön herätyslukko vapautettu!');
  }
};

// Kutsu tätä funktiota vapauttaaksesi herätyslukon
releaseWakeLock();

            

              
                Copy
              
            
          

Tämä funktio vapauttaa herätyslukon turvallisesti ja asettaa wakeLock-muuttujan arvoon null. On tärkeää varmistaa, että wakeLock-muuttujaa hallitaan oikein virheiden välttämiseksi lukkoa vapautettaessa.

4. Herätyslukon vapautustapahtumien käsittely

Järjestelmä voi vapauttaa herätyslukon eri syistä, kuten käyttäjän passiivisuuden tai alhaisen akun vuoksi. On tärkeää kuunnella release-tapahtumaa WakeLockSentinel-objektilla käsitelläksesi nämä tilanteet sulavasti. Tämä mahdollistaa herätyslukon uudelleenpyytämisen tai muiden asianmukaisten toimenpiteiden suorittamisen.

            wakeLock.addEventListener('release', () => {
  console.log('Näytön herätyslukko vapautettiin');
  // Yritä pyytää herätyslukkoa uudelleen
  // tai tee muita asianmukaisia toimia
  requestWakeLock(); // Esimerkiksi pyydä herätyslukkoa uudelleen
});

            

              
                Copy
              
            
          

Tämä esimerkki näyttää, kuinka kuunnella release-tapahtumaa ja mahdollisesti pyytää herätyslukkoa uudelleen. Todellinen toteutus riippuu sovelluksesi erityisvaatimuksista.

Parhaat käytännöt ja huomioitavat seikat

Vaikka Screen Wake Lock API on tehokas työkalu, on tärkeää käyttää sitä vastuullisesti ja ottaa huomioon seuraavat parhaat käytännöt:

• Pyydä herätyslukkoja vain tarvittaessa: Vältä herätyslukkojen hankkimista tarpeettomasti, sillä ne voivat kuluttaa laitteen akkua. Pyydä herätyslukkoa vain, kun jatkuva näytön näkyvyys on todella välttämätöntä käyttökokemuksen kannalta.
• Vapauta herätyslukot viipymättä: Vapauta herätyslukko heti, kun sitä ei enää tarvita. Tämä auttaa säästämään akkuvirtaa ja estämään tarpeetonta kulutusta.
• Käsittele vapautustapahtumat sulavasti: Ole valmis siihen, että järjestelmä voi vapauttaa herätyslukon odottamatta. Kuuntele release-tapahtumaa ja tee asianmukaiset toimet, kuten pyydä herätyslukkoa uudelleen tai ilmoita asiasta käyttäjälle.
• Tarjoa käyttäjälle hallintakeinoja: Harkitse käyttäjille annettavia hallintakeinoja herätyslukko-ominaisuuden kytkemiseksi päälle tai pois. Tämä antaa käyttäjille enemmän kontrollia laitteensa virrankulutukseen ja mahdollistaa sovelluksen toiminnan mukauttamisen. Esimerkiksi mediasoittimessa voisi olla "Pidä näyttö päällä" -kytkin.
• Ota huomioon akun kesto: Ole tietoinen vaikutuksesta akun kestoon. Näytön jatkuva päällä pitäminen voi lyhentää akun kestoa merkittävästi, erityisesti mobiililaitteissa. Ilmoita käyttäjille mahdollisesta vaikutuksesta ja tarjoa vaihtoehtoja sen lieventämiseksi.
• Käyttäjän lupa: Vaikka API itsessään ei suoraan pyydä käyttäjän lupaa, on hyvä käytäntö ilmoittaa käyttäjälle, että sovellus estää näytön sammumisen, ja antaa heidän poistaa tämä toiminto käytöstä.
• Varamekanismi: Selaimille, jotka eivät tue API:a, harkitse varamekanismin toteuttamista. Tämä voisi tarkoittaa JavaScriptin käyttöä vale-tapahtumien lähettämiseksi säännöllisesti näytölle sen himmenemisen tai lukittumisen estämiseksi. Huomaa kuitenkin, että tämä lähestymistapa voi olla vähemmän luotettava ja vaatia enemmän resursseja kuin Screen Wake Lock API:n käyttö.
• Testaaminen: Testaa sovelluksesi perusteellisesti eri laitteilla ja selaimilla varmistaaksesi, että Screen Wake Lock API toimii odotetusti. Kiinnitä huomiota akun kulutukseen ja käyttökokemukseen.
• Saavutettavuus: Ole tietoinen siitä, että näytön jatkuva päällä pitäminen voi olla ongelmallista joillekin käyttäjille. Tarjoamalla tapoja poistaa näytön herätyslukko käytöstä teet sovelluksestasi saavutettavamman.

Tosielämän esimerkkejä

Tässä on joitakin tosielämän esimerkkejä siitä, kuinka Screen Wake Lock API:a voidaan käyttää eri sovelluksissa:

• Mediasoittimet: Videon suoratoistosovellus voi käyttää Screen Wake Lock API:a estääkseen näytön himmenemisen toiston aikana, tarjoten saumattoman katselukokemuksen.
• Navigaatiosovellukset: Navigaatiosovellus voi käyttää API:a pitääkseen näytön päällä käyttäjän ajaessa, varmistaen että ohjeet ovat aina näkyvissä.
• Esityssovellukset: Esityssovellus voi käyttää API:a estääkseen näytön himmenemisen esityksen aikana, varmistaen että yleisö näkee diat koko ajan.
• Kuntoilusovellukset: Treeniä seuraava kuntoilusovellus voi pitää näytön päällä, jotta käyttäjät voivat nopeasti tarkastella mittareita ilman laitteen lukituksen avaamista.
• Reseptisovellukset: Reseptisovellus voi käyttää API:a pitääkseen näytön päällä käyttäjän seuratessa reseptiä, estäen näytön himmenemisen ruoanlaiton aikana.
• Kioskisovellukset: Kioskisovellukset hyötyvät tästä ominaisuudesta. Esimerkiksi itsepalvelukioskit lentokentillä tai ravintoloissa voivat käyttää Screen Wake Lock API:a varmistaakseen, että näyttö pysyy aktiivisena ja reagoivana käyttäjän toimiin.
• Etälääketieteen sovellukset: Virtuaalisten lääkärikäyntien aikana, erityisesti tarkkailua vaativissa, Screen Wake Lock API:a voidaan käyttää varmistamaan, että näyttö pysyy päällä koko konsultaation ajan.

Koodiesimerkki: Mediasoitin ja Screen Wake Lock

Tämä esimerkki näyttää, kuinka Screen Wake Lock API toteutetaan yksinkertaisessa mediasoitinsovelluksessa.

            
<!DOCTYPE html>
<html>
<head>
  <title>Mediasoitin ja Screen Wake Lock</title>
</head>
<body>
  <video id="myVideo" width="640" height="360" controls>
    <source src="your-video.mp4" type="video/mp4">
    Selaimesi ei tue video-elementtiä.
  </video>

  <button id="wakeLockBtn">Aktivoi näytön herätyslukko</button>

  <script>
    const video = document.getElementById('myVideo');
    const wakeLockBtn = document.getElementById('wakeLockBtn');
    let wakeLock = null;

    const requestWakeLock = async () => {
      try {
        wakeLock = await navigator.wakeLock.request('screen');
        console.log('Näytön herätyslukko aktiivinen!');
        wakeLockBtn.textContent = 'Poista näytön herätyslukko käytöstä';

        wakeLock.addEventListener('release', () => {
          console.log('Näytön herätyslukko vapautettiin');
          wakeLockBtn.textContent = 'Aktivoi näytön herätyslukko';
        });

      } catch (err) {
        console.error(`${err.name}, ${err.message}`);
      }
    };

    const releaseWakeLock = async () => {
      if (wakeLock) {
        await wakeLock.release();
        wakeLock = null;
        console.log('Näytön herätyslukko vapautettu!');
        wakeLockBtn.textContent = 'Aktivoi näytön herätyslukko';
      }
    };

    wakeLockBtn.addEventListener('click', () => {
      if (wakeLock) {
        releaseWakeLock();
      } else {
        requestWakeLock();
      }
    });

    // Valinnainen: Pyydä herätyslukkoa automaattisesti, kun video alkaa soida
    video.addEventListener('play', () => {
        if(!wakeLock){
            requestWakeLock();
        }
    });

  </script>
</body>
</html>

            

              
                Copy
              
            
          

Tämä koodi luo yksinkertaisen mediasoittimen, jossa on painike näytön herätyslukon aktivoimiseksi tai poistamiseksi käytöstä. Kun painiketta napsautetaan, koodi joko pyytää uutta herätyslukkoa tai vapauttaa olemassa olevan. Painikkeen teksti päivittyy vastaamaan herätyslukon nykyistä tilaa. Tämä esimerkki sisältää myös valinnaisen tapahtumankuuntelijan, joka pyytää herätyslukkoa automaattisesti videon toiston alkaessa. Huom: Korvaa your-video.mp4 oikealla polulla videotiedostoosi.

Tietoturvaan liittyviä huomioita

Screen Wake Lock API on suunniteltu tietoturva mielessä pitäen. Selaimet toteuttavat erilaisia turvatoimia API:n väärinkäytön estämiseksi. Esimerkiksi selaimet voivat rajoittaa herätyslukon kestoa tai vaatia käyttäjän vuorovaikutusta ennen herätyslukon myöntämistä. Noudata aina aiemmin tässä artikkelissa esitettyjä parhaita käytäntöjä varmistaaksesi, että käytät API:a vastuullisesti ja eettisesti.

Vaihtoehtoja Screen Wake Lock API:lle

Ennen Screen Wake Lock API:a kehittäjät käyttivät usein "kikkailuja" näytön sammumisen estämiseksi. Nämä menetelmät ovat yleensä epäluotettavia eikä niitä suositella.

• Tyhjä videoelementti: Lisätään sivulle pieni, äänetön videoelementti ja toistetaan sitä jatkuvasti. Tämä huijaa järjestelmää luulemaan, että mediaa toistetaan, ja estää siten lepotilan. Tämä on erittäin resurssi-intensiivistä.
• Vale-AJAX-pyynnöt: Lähetetään säännöllisesti AJAX-pyyntöjä palvelimelle pitämään laite "aktiivisena". Tämä on huono korvike, koska se on verkkointensiivinen ja epäluotettava.

Näitä menetelmiä ei suositella, koska ne ovat epäluotettavia ja voivat vaikuttaa negatiivisesti suorituskykyyn ja akun kestoon. Screen Wake Lock API on suositeltu ratkaisu näytön sammumisen estämiseen verkkosovelluksissa.

Yhteenveto

Screen Wake Lock API on arvokas työkalu web-kehittäjille, jotka haluavat luoda saumattomia ja mukaansatempaavia käyttökokemuksia. Estämällä laitteita himmentämästä tai lukitsemasta näyttöä voit varmistaa, että sovelluksesi pysyvät näkyvissä ja reagoivina jopa pitkien passiivisuusjaksojen aikana. Muista käyttää API:a vastuullisesti ja noudattaa tässä artikkelissa esitettyjä parhaita käytäntöjä välttääksesi laitteen akun kuluttamista ja negatiivista vaikutusta käyttökokemukseen. Kun API:n käyttöönotto laajenee, siitä tulee epäilemättä olennainen osa web-kehityksen työkalupakkia. Hyödynnä Screen Wake Lock API:n voimaa parantaaksesi verkkosovelluksiasi ja tarjotaksesi miellyttävämmän kokemuksen käyttäjillesi maailmanlaajuisesti.